{% extends "base.html" %}

{% block css %}
    <style type="text/css">
        div.recent_image_background{
            margin: 10px;
            float: left;
            padding: 10px;
            width: 110px;
            height: 80px;
            border: 1px solid #ccc;
            background-color: #eee;
        }

        img.recentImage {
            width: 100%;
            height: 100%;
        }
    </style>
{% endblock %}

{% block body %}

<div id="upload" class="app_tab" >
    <div id="recent_images">
    <h2>Recently uploaded images</h2>
        {% if images %}
            {% for image in images %}
                <div class="recent_image_background">
                    <a href="/{{ image.id }}"><img src="/image/source/{{ image.id }}" class="recentImage" ></a>
                </div>
            {% endfor %}   
        {% else %}
            <div class="recent_image_background">
                <img src="/static/images/question_mark.png" class="recentImage" ></a>
            </div>
        {% endif %}
    </div>

    <div id="upload_new_image" style="clear: both; ">
        <h2> Upload a new image </h2>
        <form action="/upload/image" enctype="multipart/form-data" method="POST">
            <div><input type="file" name="img" /></div>
            <div><input type="submit" value="Upload" /></div>
        </form>
    </div>
</div>

{% endblock %}
